<template>
  <div class="detailTask">
    <header-nav :leftArrow="true" :slefBack="true" :titelText="'检查任务详情'" @goBack="goBack"></header-nav>
    <div class="detail" :style="(detailForm.taskStatus == 1 &&
      (userId == detailForm.checkerId || userId == detailForm.organizerId)) ||
      (detailForm.handleShowFlag == 1 && (userId == detailForm.checkerId || userId == detailForm.organizerId)) ||
      detailForm.reviewType === 1 ||
      detailForm.registerType === false
      ? 'height: calc(100% - 122px);'
      : 'height: calc(100% - 46px);'
      ">
      <div class="infoBox">
        <div class="title">
          <div class="title-left">
            <div class="titleIcon"></div>
            <div>任务信息</div>
          </div>
        </div>
        <div class="info">
          <div class="infoItem">
            <div class="left">任务编号</div>
            <div class="right">
              {{ detailForm.taskNo }}
            </div>
          </div>
          <div class="infoItem">
            <div class="left">检查类型</div>
            <div class="right">
              {{ detailForm.checkTypeName }}
            </div>
          </div>
          <div class="infoItem">
            <div class="left">任务状态</div>
            <div class="right">
              {{
      detailForm.taskStatus == 1
        ? '未开始'
        : detailForm.taskStatus == 2
          ? '进行中'
          : detailForm.taskStatus == 3
            ? '待判定'
            : detailForm.taskStatus == 4
              ? '待处理'
              : detailForm.taskStatus == 5
                ? '已结束'
                : ''
    }}
            </div>
          </div>
          <div class="infoItem" v-if="detailForm.taskStatus > 3">
            <div class="left">检查结果</div>
            <div class="right">
              {{
      detailForm.checkResult == 1
        ? '合格'
        : detailForm.checkResult == 2
          ? '不合格'
          : ''
    }}
            </div>
          </div>
          <div class="infoItem" v-if="detailForm.taskStatus > 3">
            <div class="left">检查时间</div>
            <div class="right">{{ detailForm.endCheckTime }}</div>
          </div>
          <div class="infoItem">
            <div class="left">主办人</div>
            <div class="right">{{ detailForm.checkerName }}</div>
          </div>
          <div class="infoItem">
            <div class="left">协办人</div>
            <div class="right">{{ detailForm.organizerName }}</div>
          </div>
          <div class="infoItem" v-if="detailForm.taskStatus == 1 || detailForm.taskStatus == 2">
            <div class="left">期限提醒</div>
            <div class="right">
              <div :class="'style' + detailForm.reminderType"></div>
            </div>
          </div>
          <div class="infoItem" v-if="from == 2">
            <div class="left">安全等级</div>
            <div class="right" v-if="detailForm.placeInfo?.safeLevel == 1">
              安全
            </div>
            <div class="right" v-if="detailForm.placeInfo?.safeLevel == 2">
              中等
            </div>
            <div class="right" v-if="detailForm.placeInfo?.safeLevel > 2">
              危险
            </div>
          </div>
        </div>
      </div>

      <div class="infoBox">
        <div class="title">
          <div class="title-left">
            <div class="titleIcon"></div>
            <div>当事人信息</div>
          </div>
          <div class="title-right">
            {{
      detailForm.placeInfo?.partyType == 0
        ? '自然人'
        : detailForm.placeInfo?.partyType == 1
          ? '法人'
          : detailForm.placeInfo?.partyType == 2
            ? '个体工商户'
            : detailForm.placeInfo?.partyType == 3
              ? '非法人组织'
              : ''
    }}
          </div>
        </div>
        <div class="info">
          <div class="infoItem">
            <div class="left">
              {{
        detailForm.placeInfo?.partyType == 0
          ? '姓名'
          : detailForm.placeInfo?.partyType == 2
            ? '字号名称'
            : '单位名称'
      }}
            </div>
            <div class="right">
              {{ detailForm.placeInfo?.placeName }}
            </div>
          </div>
          <div class="infoItem" v-if="detailForm.placeInfo?.partyType == 0">
            <div class="left">性别</div>
            <div class="right">
              {{
      detailForm.placeInfo?.sex == 1
        ? '男'
        : detailForm.placeInfo?.sex == 2
          ? '女'
          : ''
    }}
            </div>
          </div>
          <div class="infoItem" v-if="detailForm.placeInfo?.partyType == 0">
            <div class="left">出生日期</div>
            <div class="right">
              {{ detailForm.placeInfo?.birthDate }}
            </div>
          </div>
          <div class="infoItem">
            <div class="left">
              {{
      detailForm.placeInfo?.partyType == 0 ||
        detailForm.placeInfo?.partyType == 2
        ? '联系电话'
        : '单位联系电话'
    }}
            </div>
            <div class="right">{{ detailForm.placeInfo?.contactsTel }}</div>
          </div>
          <div class="infoItem" v-if="detailForm.placeInfo?.partyType == 0">
            <div class="left">证件类型</div>
            <div class="right">{{ detailForm.placeInfo?.idTypeName }}</div>
          </div>
          <div class="infoItem">
            <div class="left">
              {{
      detailForm.placeInfo?.partyType == 0
        ? '证件号码'
        : '社会统一信用代码'
    }}
            </div>
            <div class="right">{{ detailForm.placeInfo?.idCode }}</div>
          </div>
          <div class="infoItem" v-if="detailForm.placeInfo?.partyType != 0">
            <div class="left">
              {{
      detailForm.placeInfo?.partyType == 1
        ? '法人'
        : detailForm.placeInfo?.partyType == 3
          ? '负责人'
          : '经营者姓名'
    }}
            </div>
            <div class="right">{{ detailForm.placeInfo?.headName }}</div>
          </div>
          <div class="infoItem" v-if="detailForm.placeInfo?.partyType == 1 ||
      detailForm.placeInfo?.partyType == 3
      ">
            <div class="left">
              {{
      detailForm.placeInfo?.partyType == 1 ? '法人电话' : '负责人电话'
    }}
            </div>
            <div class="right">{{ detailForm.placeInfo?.headTel }}</div>
          </div>

          <!-- <div class="infoItem" v-if="detailForm.placeInfo?.partyType == 1 ||
            detailForm.placeInfo?.partyType == 3
            ">
            <div class="left">
              经纬度
            </div>
            <div class="right">
              <div class="right-flex">
                {{ detailForm.placeInfo?.longitude + ',' + detailForm.placeInfo?.latitude }}
                <van-button type="primary" @click="gotoMap"
                  style="height: 24px; padding: 4px 6px;font-size: 12px;margin-left: 4px;">
                  {{ detailForm.mapUpdFlag == 1 ? '修改' : '查看' }}
                </van-button>
              </div>
            </div>
          </div> -->


          <div class="infoItem" v-if="detailForm.placeInfo?.partyType != 0">
            <div class="left">注册地址</div>
            <div class="right">
              {{
      detailForm.placeInfo?.registerCity +
      detailForm.placeInfo?.registerCounty +
      detailForm.placeInfo?.registerTown +
      detailForm.placeInfo?.registerAddress
    }}
            </div>
          </div>
          <div class="infoItem">
            <div class="left">
              {{ detailForm.placeInfo?.partyType == 0 ? '住址' : '经营地址' }}
            </div>
            <div class="right">
              {{
      detailForm.placeInfo?.operateCity +
      detailForm.placeInfo?.operateCounty +
      detailForm.placeInfo?.operateTown +
      detailForm.placeInfo?.operateAddress
    }}
            </div>
          </div>
        </div>
      </div>
      <div class="infoBox" v-if="yyzzImgs.length > 0">
        <div class="title">
          <div class="title-left">
            <div class="titleIcon"></div>
            <div>营业执照/身份证</div>
          </div>
        </div>
        <div class="info">
          <upload-pictrue :fileList="yyzzImgs" :imgType="1"></upload-pictrue>
        </div>
      </div>
      <div class="infoBox" v-if="jzwImgs.length > 0">
        <div class="title">
          <div class="title-left">
            <div class="titleIcon"></div>
            <div>建筑物照片</div>
          </div>
        </div>
        <div class="info">
          <upload-pictrue :fileList="jzwImgs" :imgType="1"></upload-pictrue>
        </div>
      </div>
      <div class="infoBox" v-if="detailForm.taskCheckFillList?.length > 0 &&
      detailForm.taskCheckFillList[0].dangerDesc != ''
      ">
        <div class="title">
          <div class="title-left">
            <div class="titleIcon"></div>
            <div>隐患信息</div>
          </div>
        </div>
        <div class="info-box" v-for="( item, index ) in  detailForm.taskCheckFillList " :key="index">
          <div class="info-title">
            第{{ index + 1 }}条
          </div>
          <div class="danger-box">
            <div class="danger-title">
              隐患内容
            </div>
            <div class="info-danger">
              {{ item.dangerDesc }}
            </div>
          </div>

          <div class="photo-box">
            <div class="photo-title">
              隐患照片
            </div>
            <upload-pictrue :fileList="item.photoUrls" :imgType="1"></upload-pictrue>
          </div>
        </div>




      </div>

      <div class="infoBox" v-if="detailForm.checkResult == 2 && detailForm.taskStatus == 5">
        <div class="title">
          <div class="title-left">
            <div class="titleIcon"></div>
            <div>处置信息</div>
          </div>
        </div>
        <div class="info">
          <div class="wsBox" style="margin-bottom: 8px" v-if="detailForm.nowCorrectFileUrl != ''">
            <div class="ws-left">
              <img src="../../assets/images/wsYes.png" alt="" />
              <div>责令立即改正文书.doc</div>
            </div>
            <div class="ws-right" @click="viewFile(detailForm.nowCorrectFileUrl)">
              查看
            </div>
          </div>
          <div class="wsBox" v-if="detailForm.punishFileUrl != ''">
            <div class="ws-left">
              <img src="../../assets/images/wsYes.png" alt="" />
              <div>当场处罚文书.doc</div>
            </div>
            <div class="ws-right" @click="viewFile(detailForm.punishFileUrl)">
              查看
            </div>
          </div>
          <div class="wsBox" v-if="detailForm.orderCorrectFileUrl != ''">
            <div class="ws-left">
              <img src="../../assets/images/wsYes.png" alt="" />
              <div>责令限期整改文书.doc</div>
            </div>
            <div class="ws-right" @click="viewFile(detailForm.orderCorrectFileUrl)">
              查看
            </div>
          </div>
          <div class="wsBox" v-if="detailForm.fileUrl != '' && from == 2">
            <div class="ws-left">
              <img src="../../assets/images/wsYes.png" alt="" />
              <div>消防安全指导意见书.doc</div>
            </div>
            <div class="ws-right" @click="viewFile(detailForm.fileUrl)">
              查看
            </div>
          </div>
          <div class="clBox" v-if="from != 2">
            处理方式：{{ ['简易程序', '一般程序'][detailForm.punishType] }}
          </div>
        </div>
      </div>

      <div class="infoBox" v-if="detailForm.taskStatus > 2">
        <div class="result">
          <div class="result-title">主办人签字</div>
          <div style="color: var(--van-primary-color)" @click="goSign(1)">
            查看签名
          </div>
        </div>
        <div class="result">
          <div class="result-title">协办人签字</div>
          <div style="color: var(--van-primary-color)" @click="goSign(2)">
            查看签名
          </div>
        </div>
        <div class="result">
          <div class="result-title">被检查单位人员签字</div>
          <div style="color: var(--van-primary-color)" @click="goSign(3)">
            查看签名
          </div>
        </div>
      </div>

      <div class="infoBox submitBtn2" v-if="(detailForm.taskStatus == 1 &&
      (userId == detailForm.checkerId || userId == detailForm.organizerId)) ||
      (detailForm.taskStatus == 4 && (userId == detailForm.checkerId || userId == detailForm.organizerId)) ||
      detailForm.reviewType === 1 ||
      detailForm.registerType === false
      ">
        <van-button block type="primary" v-if="detailForm.taskStatus == 1 &&
      (userId == detailForm.checkerId || userId == detailForm.organizerId)
      " @click.stop="startCheck()">
          开始检查
        </van-button>
        <van-button block type="primary" v-if="detailForm.handleShowFlag == 1 &&
      (userId == detailForm.checkerId || userId == detailForm.organizerId) && !checkType
      " @click.stop="resultCheck(detailForm.id, detailForm.checkResult)">
          结果处理
        </van-button>
        <van-button block type="primary" v-if="detailForm.reviewType === 1" @click="goCheck()">
          复查
        </van-button>
        <van-button block type="primary" v-if="detailForm.registerType === false" @click="goRegister(detailForm.id)">
          立案
        </van-button>

        <van-button block type="primary" v-if="detailForm.taskStatus == 4 &&
      (userId == detailForm.checkerId || userId == detailForm.organizerId) && checkType"
          @click="submitResult(detailForm.id,checkType)">
          {{checkType=='other'?'提交':'受案登记'}}
        </van-button>
      </div>

      <van-popup v-model:show="signPicker" round position="bottom" closeable>
        <div style="text-align: right">
          <van-image style="width: 100%;height: 500px;" v-if="signFlag == 1" :src="sign1" />
          <van-image style="width: 100%;height: 500px;" v-if="signFlag == 2" :src="sign2" />
          <van-image style="width: 100%;height: 500px;" v-if="signFlag == 3" :src="sign3" />
        </div>
      </van-popup>
    </div>
  </div>
</template>

<script setup name="detail">
import { showConfirmDialog, showSuccessToast, showFailToast } from 'vant'
import { imgUrlToBase64 } from '../../util/util'
const { useVision, useDays, usePublic } = $globalStore
const router = useRouter()
const route = useRoute()
const id = ref(route.query.id)
const from = ref(route.query.from)
const userId = ref(JSON.parse(sessionStorage.getItem('userInfo')).id)
const detailForm = ref({})

const checkType = ref(route.query.checkType)
//建筑物照片
const jzwImgs = ref([])
const yyzzImgs = ref([])

const sign1 = ref('')
const sign2 = ref('')
const sign3 = ref('')
const signFlag = ref(0)
const signPicker = ref(false)
const goSign = (val) => {
  signFlag.value = val
  signPicker.value = true
}

//打开地图
const gotoMap = () => {

  const defaultLocation = JSON.stringify([
    {
      lnglat: [detailForm.value.placeInfo?.longitude, detailForm.value.placeInfo?.latitude]
    }
  ])

  router.push({
    path: '/testMap',
    query: {
      type: 'location',
      defaultLocation,
      path: '/detailSuperviseTask',
      id: id.value,
      from: from.value,
      placeId: detailForm.value.placeInfo?.id,
      mapUpdFlag: detailForm.value.mapUpdFlag
    }
  })
}

//开始检查
const startCheck = async () => {
  const res = await useVision.taskStart(id.value)
  if (res.code == 0) {
    if (from.value == 2) {
      router.push({ name: 'checkDaysTask', query: { id: id.value } })
    } else {
      router.push({ name: 'checkSuperviseTask', query: { id: id.value } })
    }


  }
}

//复查
const goCheck = async () => {
  router.push({ name: 'addDaysTask', query: { id: id.value, reCheck: 1 } })
}

//结果处理
const resultCheck = (id, checkResult) => {
  if (from.value == 2) {
    if (checkResult == '1') {
      router.push({ name: 'checkNumberSet', query: { id: id } })
    } else {
      router.push({ name: 'checkDaysResult', query: { id: id } })
    }
  } else {
    if (checkResult == '1') {
      router.push({ name: 'checkSuperviseNumber', query: { id: id } })
    } else {
      if (checkTypeName == '监督检查') {
        router.push({ name: 'checkResultTask', query: { id: id } })
      } else if (checkTypeName == '其他') {
        router.push({ name: 'detailSuperviseTask', query: { id: id, checkType: 'other' } })
      } else {
        router.push({ name: 'detailSuperviseTask', query: { id: id, checkType: 'fc' } })
      }
    }
  }
}

const submitResult = (id, type) => {
  showConfirmDialog({
    title: '提示',
    message: '是否确定结束任务？',
  })
    .then(() => {
      processFireInspeTask(id, type)
    })
    .catch(() => {
      // on cancel
    })
}

const processFireInspeTask = async (id, type) => {
  let params = {
    id: id,
  }
  let res = await useVision.processFireInspeTaskInfo(params)
  if (res.code == 0) {
    //根据不同情况跳转到不同的页面
    if (type == 'other') {
      router.push({ name: 'superviseList' })
    } else {
      router.push({ name: 'addRegisterTask', query: { id: '', taskId: id.value } })
    }
  } else {
    showFailToast(res.message)
  }
}


//立案
const goRegister = (id) => {
  router.push({
    name: 'addRegisterTask',
    query: {
      id: '',
      taskId: id,
      queryForm: JSON.stringify(detailForm.value.placeInfo),
    },
  })
}

const goBack = () => {
  if (from.value == 1) {
    router.push({
      name: 'superviseList',
    })
  } else if (from.value == 2) {
    router.push({
      name: 'daysList',
    })
  } else {
    router.go(-1)
  }
}

onMounted(async () => {
  if (id.value != '') {
    let data = {}
    let code = 0
    if (from.value == 1) {
      const res = await useVision.taskInfo(id.value)
      data = res.data
      code = res.code
    } else {
      const res = await useDays.taskInfo(id.value)
      data = res.data
      code = res.code
    }
    if (code == 0) {
      jzwImgs.value = []
      yyzzImgs.value = []
      if (data.placePhotoUrl != '') {
        let arr = data.placePhotoUrl.split(',')
        arr.forEach(async (element) => {
          const r = await usePublic.bindFileUrl(element)
          if (r.code == 0) {
            jzwImgs.value.push(r.data)
          }
        })
      }
      if (data.buseLicence != '') {
        let arr = data.buseLicence.split(',')
        arr.forEach(async (element) => {
          const r = await usePublic.bindFileUrl(element)
          if (r.code == 0) {
            yyzzImgs.value.push(r.data)
          }
        })
      }

      if (data.checkerSign != '') {
        let s = data.checkerSign.split(',')
        const r = await usePublic.bindFileUrl(s[0])
        if (r.code == 0) {
          imgUrlToBase64(r.data).then((s) => {
            sign1.value = s
          })
        }
        const d = await usePublic.bindFileUrl(s[1])
        if (d.code == 0) {
          imgUrlToBase64(d.data).then((r) => {
            sign2.value = r
          })
        }
      }
      if (data.enterpriserSign != '') {
        const t = await usePublic.bindFileUrl(data.enterpriserSign)
        if (t.code == 0) {
          imgUrlToBase64(t.data).then((r) => {
            sign3.value = r
          })
        }
      }
      data.taskCheckFillList.forEach(async (item) => {
        let urlarr = []
        let newList = item.photoUrls.map(async item => {
          let arr = await usePublic.bindFileUrl(item)
          urlarr.push(arr.data)
          return arr
        })
        await Promise.all(newList);
        item.photoUrls = urlarr
      })
      setTimeout(() => {
        detailForm.value = data
      }, 200);
    }
  }
  if (route.query.lnglat) {
    detailForm.value.placeInfo.longitude = route.query.lnglat.split(',')[0]
    detailForm.value.placeInfo.latitude = route.query.lnglat.split(',')[1]
  }
})



//查看文件
const viewFile = async (url) => {
  router.push({
    name: 'fileDetail',
    query: {
      url: url,
    },
  })
}
</script>

<style lang="scss" scoped>
.detailTask {
  width: 100%;
  height: 100%;
  overflow-y: hidden;
  background-color: #f7f7f7;

  .detail {
    width: 100%;
    overflow-y: auto;
    margin-top: 46px;

    .infoBox {
      background-color: #ffffff;
      margin: 10px 8px;
      border-radius: 8px;

      .title {
        padding: 16px 12px;
        display: flex;
        justify-content: space-between;
        border-bottom: 1px solid #f5f5f5;

        .title-left {
          display: flex;
          align-items: center;

          .titleIcon {
            width: 4px;
            height: 14px;
            background: linear-gradient(180deg, #5688f5 0%, #1764ce 100%);
            border-radius: 20px;
            margin-right: 8px;
          }
        }

        .title-right {
          padding: 5px 12px;
          font-size: 14px;
          font-weight: 400;
          letter-spacing: 0px;
          line-height: 20px;
          color: #1764ce;
          background-color: rgba(23, 100, 206, 0.1);
          border-radius: 4px;
        }
      }

      .info {
        padding: 16px 12px;

        .infoItem {
          display: flex;
          justify-content: space-between;
          margin-bottom: 12px;

          .left {
            font-size: 15px;
            font-weight: 400;
            letter-spacing: 0px;
            line-height: 22px;
            color: #8c8c8c;
            min-width: 80px;
            margin-right: 20px;
          }

          .right {
            width: 1px;
            font-size: 15px;
            font-weight: 400;
            letter-spacing: 0px;
            line-height: 22px;
            color: #2b2b2b;
            text-align: right;
            flex: 1;
            word-wrap: break-word;

            .right-flex {
              display: flex;
              align-items: center;
            }

            .style1 {
              width: 30px;
              height: 14px;
              background: blue;
              float: right;
            }

            .style2 {
              width: 30px;
              height: 14px;
              background: yellow;
              float: right;
            }

            .style3 {
              width: 30px;
              height: 14px;
              background: orange;
              float: right;
            }

            .style5 {
              width: 30px;
              height: 14px;
              background: red;
              float: right;
            }

            /* 设置自动换行 */
          }
        }

        .infoItem:last-child {
          margin-bottom: 0;
        }

        .danger {
          margin-bottom: 12px;
        }

        .danger:last-child {
          margin-bottom: 0;
        }

        .wsBox {
          display: flex;
          justify-content: space-between;
          align-items: center;

          .ws-left {
            max-width: 250px;
            display: flex;
            align-items: center;
            color: #2b2b2b;
            font-size: 15px;
            font-weight: 500;

            >img {
              width: 36px;
              height: 36px;
            }
          }

          .ws-right {
            min-width: 50px;
            color: #1764ce;
            font-size: 14px;
            font-weight: 400;
          }
        }

        .clBox {
          margin-top: 12px;
        }
      }

      .result {
        padding: 16px;
        display: flex;
        justify-content: space-between;
        border-bottom: 1px solid #f5f5f5;

        .result-title {
          // width: 140px;
          font-size: 16px;
          font-weight: 400;
          letter-spacing: 0px;
          line-height: 24px;
          color: #4d4d4d;
        }
      }
    }
  }
}

.info-box {
  padding: 16px 12px;
  border-bottom: 1px solid rgba(245, 245, 245, 1);

  .info-title {
    /** 文本1 */
    font-size: 16px;
    font-weight: 500;
    line-height: 22px;
    color: rgba(102, 102, 102, 1);
  }

  .danger-box {
    padding: 8px 0 16px 0;
    border-bottom: 1px solid rgba(245, 245, 245, 1);

    .danger-title {
      /** 文本1 */
      font-size: 15px;
      font-weight: 400;
      line-height: 20px;
      color: rgba(77, 77, 77, 1);
      margin-bottom: 8px;
    }

    .info-danger {
      /** 文本1 */
      font-size: 15px;
      font-weight: 400;
      line-height: 24px;
      color: rgba(43, 43, 43, 1);
    }
  }

  .photo-box {
    padding-top: 16px;

    .photo-title {
      /** 文本1 */
      font-size: 15px;
      font-weight: 400;
      line-height: 20px;
      color: rgba(77, 77, 77, 1);
      margin-bottom: 8px;
    }
  }
}
</style>
